<template>
  <div>
    <h2 class="headstr">技能学习入口</h2>
    <!-- 每个元素的两侧间隔相等 -->
    <van-row justify="space-around">
      <van-col span="6">
        <van-button @click="jnrk_click('xiake')"> 侠客 </van-button>
      </van-col>
      <van-col span="6">
        <van-button @click="jnrk_click('zhanshi')"> 战士 </van-button>
      </van-col>
      <van-col span="6">
        <van-button @click="jnrk_click('fashi')"> 法师 </van-button>
      </van-col>
      <van-col span="6">
        <van-button @click="jnrk_click('xiuzhen')"> 修真 </van-button>
      </van-col>
    </van-row>
    <!-- 每个元素的两侧间隔相等 -->
    <van-row justify="space-around">
      <van-col span="6">
        <van-button @click="jnrk_click('xianzhe')"> 贤者 </van-button>
      </van-col>
      <van-col span="6">
        <van-button @click="jnrk_click('wusheng')"> 武圣 </van-button>
      </van-col>
      <van-col span="6">
        <van-button @click="jnrk_click('qiangwang')"> 枪王 </van-button>
      </van-col>
      <van-col span="6">
        <!-- <van-button @click="jnrk_click('qiangwang')"> 枪王 </van-button> -->
      </van-col>
    </van-row>
    <h2 class="headstr">已学技能</h2>
    <van-cell-group v-if="yx_show">
      <van-cell
        v-for="(item, idx) in data"
        :class="idx === data.length - 1 ? '' : 'border_bottom'"
        :key="item"
        :title="item.name"
        :value="item.zhiye_name"
      >
        <template v-slot:label>
          <span v-html="item.attrs_content"></span>
        </template>
      </van-cell>
    </van-cell-group>
    <tabbar :active_idx="1" />
  </div>
</template>

<script>
import { Cell, CellGroup, Button, Col, Row } from 'vant'
import tabbar from './tabbar.vue'
import axios from 'axios'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    tabbar,
  },
  setup() {
    return {}
  },
  data() {
    return {
      yx_show: false,
      data: [],
    }
  },
  methods: {
    jnrk_click: function (zy_type) {
      this.$router.push({
        path: '/jn_list',
        query: { zy_type: zy_type },
      })
    },
    get_rw_jns: function () {
      axios.get('/apis/skills/').then((res) => {
        // console.log(res.data)
        this.data = res.data
        // console.log(this.data)
        this.yx_show = true
      })
    },
  },
  mounted: function () {
    this.get_rw_jns()
  },
}
</script>

<style lang="scss" scoped>
.headstr {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.border_bottom {
  border-bottom: 1px solid rgb(235, 235, 235);
}
</style>
